<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}{{ course.course_title }}{% endblock title %}{% block subtitle %}{% endblock subtitle %}</title>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" href="{% if course.course_favicon %}{{ MEDIA_URL }}{{course.course_favicon}}{% else %}{{ STATIC_URL }}images/favicon.ico{% endif %}" />
    {% load compress %}

    {# Compress the different css files #}
    {% compress css %}
        {% block css %}
        {% if options.general.menu_style.value == "TOP" %}
            <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/topmenu.css" >
    
        {% else %}{% if options.general.menu_style.value == "SIDE" %}
            <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/sidemenu.css" >
    
        {% endif %}{% endif %}
        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css" >
        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/popup_container.css" >
        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/form_container.css" >
        <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}js/epoch/epoch_styles.css">
        <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/html5dnd.css">
        {% if course.course_css %}<link rel="stylesheet" href="{{MEDIA_URL}}{{course.course_css}}" type="text/css">{% endif %}
        {% endblock css %}
    {% endcompress %}
    
    {# Leave the main tinyMCE script out of the compress tag #}
    <script type="text/javascript" src="{% url tinymce-compressor %}"></script>
    
    {# Compress the rest of the javascript #}
    {% compress js %}
        {% block js %}
        <script type="text/javascript" src="{{STATIC_URL}}js/textareas_gzip.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}js/jquery.min.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}js/html5dnd.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}js/main.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}js/textareas.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}js/epoch/epoch_classes.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}js/modernizr.js"></script>
        <script type="text/javascript" src="{{STATIC_URL}}js/help.js"></script>
        {% if course.course_js %}<script type="text/javascript" src="{{MEDIA_URL}}{{course.course_js}}"></script>{% endif %}
        {% endblock js %}
    {% endcompress %}
    {% block extra_header %} {% endblock extra_header %}
</head>

<body ontouchstart="">
    <div class="wrapper">
    <div class="topbar">
        <div class="maintitle">
        {% block topbar %}
            <h1>
                {% if options.courses.show_course_id_in_pages.value and course.course_id != "__default"%}
                    {{course.course_id}}
                    {% if course.course_title %} - {% endif %}
                {% endif %}
                {% if course.course_title %}{{ course.course_title }}{% endif %}
            </h1>
            {% if course.course_subtitle %}<h2>{{ course.course_subtitle}}</h2>{% endif %}
        {% endblock topbar %}
        </div>
        <div class="topmenu">
            {% block topmenu %}
            <ul class="topmenu">
                {% block menu-leftitems %}
                    <li class="active"><a href="{% course_url course_index %}">Home</a></li>
                    {% if ActivityMenu %}
                        {{ActivityMenu|safe}}
                    {% endif %}
                    {% if CourseUser.course_participant and course.forum %}
                        <li class="active"><a href="{% course_url forum_view_threads %}">Forum</a></li>
                    {% endif %}
                {% if CourseUser.course_participant and course.show_class_roster %}
                    <li class="active"><a href="{% course_url apps.participants.views.index %}">{{course.class_roster_title}}</a></li>
                {% endif %}
                {% if course.course_id == '__default' and options.general.show_course_list.value == "MENU" %}
                    {% load courses %}    
                    {% get_course_menu %}
                    {{course_menu}}
                {% endif %}
            {% endblock menu-leftitems %}
            
            {% block menu-rightitems %}
                {% if request.user.is_authenticated %}
                    <li class="active menuright"><a id="logout" href="{% course_url logout %}?next={% course_url course_index %}">Logout</a></li>
                    {% if CourseUser.is_management %}
                        <li class="active menuright">
                            <a href="{% course_url management app="help" %}">Help</a>
                        </li>
                        <li class="active menuright">
                            <a href="{% course_url management %}">Manage</a>
                        </li>
                    {% else %}
                        <li class="active menuright">
                            <a href="{% course_url apps.help.views.FAQ_view %}">Help</a>
                        </li>
                    {% endif %}
                    <li class="menuright">
                        <a href="{% course_url apps.participants.views.view_profile username=user.username %}">Welcome, {{user.first_name}}!</a>
                        {% if request.user.unread_messages|length > 0 %}<a href="{% course_url forum_view_messages %}" class="forum-menubar-unread-messages" title="You have unread messages">({{request.user.unread_messages|length}})</a>{% endif %}
                    </li>
                {% else %}
                    <li class="menuright">
                        <div class="popup_container">
                            <span class="popup_title"><a>Login</a></span>
                            <span class="left_down_popup">
                                <form action='{% course_url login %}' method='post'>{% csrf_token %}
                                <table>
                                    <tr>
                                    <th>Username:</th><td><input id="login-username" type="text" name="username"></input></td>
                                    </tr>
                                    <tr>
                                    <th>Password:</th><td><input type="password" name="password"></input></td>
                                    </tr>
                                    <tr><td colspan="100%" class="center"><a href="{% url password_reset %}">Need New Password?</a></td>
                                    </tr>
                                    <tr>
                                        <td colspan="100%" class="center"><button type="submit">Login</button></td>
                                    </tr>
                                </table>
                                <input type="hidden" name="next" value="{{request.path}}" />
                                </form>
                            </span>
                        </div>
                    </li>
                {% endif %}
            {% endblock menu-rightitems %}
            </ul>
            {% endblock topmenu %}
            <div style="clear: both;"></div>
        </div>
    </div>
    {% if messages %}
    <div class="messages" id="messages">
            <ul class="messages">
                {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                {% endfor %}
            </ul>
    </div>
    {% endif %}
    <div class="content">
        {% block content %}{% endblock %}
    </div>
    </div>
    <script type="text/javascript">
    /* <![CDATA[ */
        var all_elements = document.getElementsByTagName("*")
        for (var i = 0; i < all_elements.length ; i++)
        {
                if (all_elements[i].className == "javascript")
                {
                        all_elements[i].style.display = "inline";
                }
                if (all_elements[i].className == "non-javascript")
                {
                        all_elements[i].style.display = "none";
                }
        }
    /* ]]> */
    </script>
</body>
</html>
